import { useContext, useState, useEffect } from "react";

import Form from "../../components/Form";
import { BookContext } from "../contexts/Book";

const ZustForm = ({states, initState}) => {

  console.log(states);

  const [stateName, setStateName] = useState(initState ?? '0');

  const {book, fetchTable} = useContext(BookContext);

  useEffect(() => {
    if (states[stateName].query){
      fetchTable(states[stateName].query);
    }
  }, [stateName])

  const onTrans = (data, newState, entry) => {
    console.log('on trans', data, newState, entry);
    setStateName(newState);
  }

  const props = {
    state: states[stateName],
    data: book[states[stateName].query.name]
  }

  return <Form {...{state: states[stateName], data:book[states[stateName].query.name], onTrans}} />
}

export default ZustForm;